<div class="container">
  <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Markets</h1>
  @if (hasPermissionToAccessFearAndGreedIndex) {
    <div class="mb-5 row">
      <div class="col-xs-12 col-md-10 offset-md-1">
        <div class="mb-2 text-center text-muted">
          <small i18n>Last {{ numberOfDays }} Days</small>
        </div>
        <gf-line-chart
          class="mb-3"
          label="Fear & Greed Index"
          [colorScheme]="user?.settings?.colorScheme"
          [historicalDataItems]="historicalDataItems"
          [isAnimated]="true"
          [locale]="user?.settings?.locale || undefined"
          [showXAxis]="true"
          [showYAxis]="true"
          [yMax]="100"
          [yMaxLabel]="greedLabel"
          [yMin]="0"
          [yMinLabel]="fearLabel"
        />
        <gf-fear-and-greed-index
          class="d-flex justify-content-center"
          [fearAndGreedIndex]="fearAndGreedIndex"
        />
      </div>
    </div>
  }

  <div class="mb-3 row">
    <div class="col-xs-12 col-md-10 offset-md-1">
      <gf-benchmark
        [benchmarks]="benchmarks"
        [deviceType]="deviceType"
        [locale]="user?.settings?.locale || undefined"
        [showSymbol]="false"
        [user]="user"
      />
      @if (benchmarks?.length > 0) {
        <div
          class="gf-text-wrap-balance line-height-1 mt-3 text-center text-muted"
        >
          <small i18n>
            Calculations are based on delayed market data and may not be
            displayed in real-time.</small
          >
        </div>
      }
    </div>
  </div>
</div>
